<template>
  <div class="mobile5-box">

      <my-header :title="title"></my-header>

    <div class="header">
      <img src="../../../assets/image/mobile5/mobile5-1.jpg" alt>
      <div class="coupons">
        <img src="../../../assets/image/mobile5/mobile5-2.jpg" alt>
      </div>
    </div>
    <div
      floorindex="2"
      class="coupon-list-box"
      style="background-color:#80149e;padding-top:0.2rem;padding-bottom:0.2rem;"
    >
      <section class="coupon-list" >
        <article
          class="coupon-body coupon-body coupon-body-2-1 coupon-body-disable"
        >
          <div
            class="sawtooth-1"
            style="background: rgb(255, 188, 58); border-color: rgb(128, 20, 158);"
          ></div>
          <div  class="circle-1" style="background: rgb(128, 20, 158);"></div>
          <div  class="circle-2" style="background: rgb(128, 20, 158);"></div>
          <div  class="box" style="background: rgb(238, 238, 238);">
            <div  class="price">
              <sup >￥</sup>
              <span >50</span>
            </div>
            <div  class="consume" style="color: rgb(204, 204, 204);">满399可用</div>
            <div  class="btn" style="color: rgb(204, 204, 204);">立即领取</div>
          </div>
          <div
            class="sawtooth-2"
            style="background: rgb(255, 188, 58); border-color: rgb(128, 20, 158);"
          ></div>
          <!---->
          <div  class="status">已领取</div>
        </article>
        <article
          class="coupon-body coupon-body coupon-body-2-1 coupon-body-disable"
        >
          <div
            class="sawtooth-1"
            style="background: rgb(255, 188, 58); border-color: rgb(128, 20, 158);"
          ></div>
          <div  class="circle-1" style="background: rgb(128, 20, 158);"></div>
          <div  class="circle-2" style="background: rgb(128, 20, 158);"></div>
          <div  class="box" style="background: rgb(238, 238, 238);">
            <div  class="price">
              <sup >￥</sup>
              <span >20</span>
            </div>
            <div  class="consume" style="color: rgb(204, 204, 204);">满299可用</div>
            <div  class="btn" style="color: rgb(204, 204, 204);">立即领取</div>
          </div>
          <div
            class="sawtooth-2"
            style="background: rgb(255, 188, 58); border-color: rgb(128, 20, 158);"
          ></div>
          <!---->
          <div  class="status">已领取</div>
        </article>
      </section>
    </div>
    <div class="content">
      <div class="content1">
        <img src="../../../assets/image/mobile5/mobile5-3.jpg" alt>
        <div class="content1-list" v-for="value in moblie5List" :key="value.productCode">
            <router-link :to="'/product/' + value.productCode">
              <div class="list">
                  <div class="list-left">
                      <img :src="value.productImageUrl" alt="">
                  </div>
                  <div class="list-right">
                      <p class="list-text">{{ value.productName }}</p>
                      <p class="list-price">
                          <span class="price-left">
                              <em>￥</em>
                              {{ value.productPrice/100 + '.00' }}
                          </span>
                          <span class="price-right">立即购买</span>
                      </p>
                  </div>
              </div>
            </router-link>
        </div>
      </div>
      <div class="content2">
          <img src="../../../assets/image/mobile5/mobile5-4.jpg" alt>
          <div class="content1-list" v-for="value in moblie5List1" :key="value.productCode">
            <router-link :to="'/product/' + value.productCode">
              <div class="list">
                  <div class="list-left">
                      <img :src="value.productImageUrl" alt="">
                  </div>
                  <div class="list-right">
                      <p class="list-text">{{ value.productName }}</p>
                      <p class="list-price">
                          <span class="price-left">
                              <em>￥</em>
                              {{ value.productPrice/100 + '.00' }}
                          </span>
                          <span class="price-right">立即购买</span>
                      </p>
                  </div>
              </div>
            </router-link>  
          </div>
      </div>
    </div>
  </div>
</template>

<script>
// import imgUrl1 from '../../../assets/image/mobile5/mobile5-1.jpg'
import myHeader from 'Components/common/myHeader.1'

import {mapActions, mapGetters} from 'vuex'
export default {
    components: {
        myHeader
    },
    data () {
        return {
            moblie5List: [],
            moblie5List1: [],
            title: '性福',
        }
    },
    methods: {
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('3669,475907');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('758157,475906,2268,220793,779955,849530,158512,849245,156616,156615,858038,859064,155444,3977,6288,159381');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        
        // 改变背景颜色
        document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        document.querySelector('.van-icon').style.color = '#ffffffcc';
        document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        document.querySelector('.van-hairline--bottom').style.background = '#80149e';
        document.querySelector('.van-hairline--bottom').style.opacity = '0.9'
    }
};
</script>

<style lang="scss" scoped>
.van-icon {
  color: #fff !important;
}

body {
  background: #80149e;
}
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
a {
  color: #333;
}

.header {
    .coupons {
        padding: .1rem;
        background: #80149e;
    }
}
.coupon-list-box {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    .coupon-list {
        padding-left: .1rem;
        padding-right: .1rem;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        .coupon-body {
            filter: grayscale(100%);
            opacity: .4;
            background: #f5f5f5;

            position: relative;

            width: 1.68rem;
            height: .76rem;
            padding: 0;
            margin: 0 .05rem;

            text-align: center;
            overflow: hidden;
            color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            padding: 0 .05rem;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            position: relative;
            .sawtooth-1 {
                -webkit-box-flex: 0;
                -webkit-flex: 0 0 0.04rem;
                -ms-flex: 0 0 0.04rem;
                flex: 0 0 0.04rem;
                background: #805aff;
                display: block;
                border-left: .05rem dotted #fff;
                height: .9rem;
                position: relative;
                // top: -.1rem;
                margin-left: -.025rem;
            }
            .circle-1 {
                top: -.05rem;
                display: block;
                width: .1rem;
                height: .1rem;
                background: #fff;
                -webkit-border-radius: 100%;
                border-radius: 100%;
                position: absolute;
                right: .3rem;
                z-index: 1;
            }
            .circle-2 {
                bottom: -.05rem;
                display: block;
                width: .1rem;
                height: .1rem;
                background: #fff;
                -webkit-border-radius: 100%;
                border-radius: 100%;
                position: absolute;
                right: .3rem;
                z-index: 1;
            }
            .box {
                padding: 0 .4rem 0 .03rem;
                background: #805aff;
                height: .76rem;
                position: relative;
                -webkit-box-flex: 1;
                -webkit-flex: 1 0 auto;
                -ms-flex: 1 0 auto;
                flex: 1 0 auto;
                white-space: normal;
                .price {
                    color: #888!important;
                    margin-top: .08rem;
                    height: 0.4rem;
                    line-height: .4rem;
                    sup {
                        font-size: .18rem;
                    }
                    span {
                        font-size: .34rem;
                    }
                }
                .btn {
                    width: .34rem;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    right: 0;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: .12rem .1rem;
                    line-height: .13rem;
                    font-size: .11rem;
                    background: hsla(0,0%,100%,.08);
                }
            }
            .sawtooth-2 {
                background: rgb(255, 188, 58);
                border-color: rgb(128, 20, 158);
            }
            .status {
                position: absolute;
                width: .5rem;
                height: 0.5rem;
                top: 0.05rem;
                right: 0.15rem;
                border-radius: 50%;
                border: 1px solid #222;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                font-size: 0.12rem;
                color: #222;
                font-weight: 700;
                z-index: 1;
                -webkit-transform: rotate(45deg);
                transform: rotate(-45deg);
                -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
            }
        }
    }
}
.content1-list {
    padding: .1rem;
    background: #80149e;
    .list {
        display: flex;
        padding: .1rem;
        background: #fff;
        align-items: center;
        .list-left {
            flex: 110;
        }
        .list-right {
            flex: 265;
            // margin-left: -1px;
            padding-left: .1rem;
            line-height: 1.5;
            .list-text {
                white-space: pre-wrap;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                font-size: 16px;
                color: #f53b10;
                margin-bottom: 5px;
            }
            .list-price {
                display: flex;
                justify-content: space-between;
                padding-top: .1rem;
                .price-left {
                    font-size: .16rem;
                    display: flex;
                    align-items: flex-end;
                    em {
                        font-size: .12rem;
                    }
                }
                .price-right {
                    padding: .06rem .1rem;
                    border-radius: .2rem;
                    background: #f53b10;
                    color: #fff;
                    font-size: .14rem;
                }
            }
        }
    }
}
</style>


